<template>
    <div>
        <el-card class="box-card m-b" body-style="padding-top: 10px; padding-bottom: 10px;">
            <el-row >
                <el-autocomplete placeholder="请输入内容" :fetch-suggestions="querySearchAsync" v-model="gitName" style="width:400px" class="mr-4" size="small">
                    <template slot="prepend">Git Name:</template>
                </el-autocomplete>
                <el-autocomplete :disabled="disabled" placeholder="请输入内容" :fetch-suggestions="querySearchAsync2" v-model="gitRevision" style="width:400px" class="mr-4" size="small">
                    <template slot="prepend">Git Revision:</template>
                </el-autocomplete>
                <el-button
                    icon="el-icon-search" 
                    size="small"
                    type="primary"
                    @click="search"
                    class=""
                    style="margin-left: 30px;margin-right: 5px;">
                    搜索
                </el-button>
            </el-row>               
        </el-card>
        <el-card shadow="never">
            <div slot="header" class="clearfix">
                <span>项目及分支信息</span>
            </div>
            <el-row >
                <el-table
                    :data="tableData.slice((currentPage-1)*pageSize, currentPage*pageSize)"
                    border
                    style="width: 100%">
                    <el-table-column prop="project" width="100" label="Project" fixed></el-table-column>
                    <el-table-column min-width="" label="Manifest库分支及文件列表">
                        <template slot-scope="sub">
                            <el-table
                                size='mini'
                                :data="sub.row.branch"
                                border>
                                <el-table-column width="180" property="branch" label="分支"></el-table-column>
                                <el-table-column min-width="" label="文件列表">
                                    <template slot-scope="sub">
                                        {{ sub.row.xml_list }}
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    style="padding-top: 10px;"
                    background
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    layout="total, prev, pager, next, jumper"
                    :total="total">
                </el-pagination>
            </el-row>        
        </el-card>
    </div>
    
</template>
<script>
import { getHeader } from '@/app.config'
import http from '@/views/sys/axios'

export default {
    data() {
        return {
            timeout: null,
            timeout2: null,
            timeout3: null,
            disabled: true,
            gitNameList: [],
            revisionList: [],
            gitName: '',
            gitRevision: '',
            currentPage: 1,
            total: 0,
            tableData: [],
            pageSize: 10,
        }
    },
    methods: {
        querySearchAsync(queryString, cb) {
            let gitNameList = this.gitNameList;
            let results = queryString ? gitNameList.filter(this.createStateFilter(queryString)) : gitNameList;
            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
            cb(results);
            }, 1000 * Math.random());
        },
        querySearchAsync2(queryString, cb) {
            let revisionList = this.revisionList;
            let results = queryString ? revisionList.filter(this.createStateFilter(queryString)) : revisionList;

            clearTimeout(this.timeout);
            this.timeout = setTimeout(() => {
            cb(results);
            }, 1000 * Math.random());
        },
        createStateFilter(queryString) {
            return (state) => {
                return (state.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
            };
        },
        getGitNameList() {
            const res = http.get(`/api/manifest/match/git?name=${this.gitName}`)
            return res       
        },
        getRevisionList() {
            const res = http.get(`/api/manifest/match/revision?name=${this.gitName}&revision=${this.gitRevision}`)
            return res
        },
        async getGitNameListResult() {
            let { code, git_name } = await this.getGitNameList()
            
            if(code === 200) {
                git_name.map((item, index) => {
                    git_name[index] = { value: item }
                })
                this.gitNameList = git_name
            }
        },
        async getRevisionListResult() {
            let { code, revision } = await this.getRevisionList()
            if(code === 200) {
                revision.map((item, index) => {
                    revision[index] = { value: item }
                })
                this.revisionList = revision
            }
        },
        search() {
            var name = this.gitName;
            var revision = this.gitRevision;
            if (name && revision) {
                this.reverseSearch(name, revision);
            }
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.currentPage = val;
        },
        reverseSearch(name, revision) {
            var source = process.env.VUE_APP_KANBAN_HOST+'/api/manifest/reversesearch?git_name='+name+'&git_revision='+revision
            this.$axios.get(source, {headers: getHeader()})
                .then((response) => {
                    if (response.status == 200) {
                        if (response.data.code == 200) {
                            this.tableData = response.data.search_result;
                            this.total = this.tableData.length;
                        }
                    }
                })
                .catch((err) => {
                    // eslint-disable-next-line
                    console.log(err);
                });
        }
    },
    watch: {
        gitName(newVal) {          
            this.gitName ? this.disabled = false : this.disabled = true
            if(newVal) {
                clearTimeout(this.timeout2)
                this.timeout2 = setTimeout(() => {
                    this.getGitNameListResult()
                }, 500)     
            }
        },
        gitRevision(newVal) {
            if(newVal) {
                clearTimeout(this.timeout3)
                this.timeout3 = setTimeout(() => {
                    this.getRevisionListResult()
                }, 500)     
            }
        }
    }
}
</script>    